{% load myfilter %}
<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="icon" href="/api/favicon">
    <script src="https://cdn.staticfile.org/vue/2.6.11/vue.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.1/theme-chalk/index.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.1/index.min.js"></script>
    <link rel="stylesheet" href="{% static 'css/cms/index.css' %}">
    <link rel="stylesheet" href="{% static 'css/cms/user_control.css' %}">
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/echarts.min.js"></script>
    <title>大学生心理健康评估：后台管理</title>
</head>
<body>
<div id="app">
    <header class="header">
        <h3>大学生心理健康评估：后台管理</h3>
        <div>
            <h3>Admin</h3>
            <el-button @click="logout" size="mini">退出</el-button>
        </div>
    </header>
    <main class="main">
        <el-menu default-active="2" class="sidebar" @select="navto">
            <el-menu-item index="1">
                <i class="el-icon-menu"></i>
                <span slot="title">首&nbsp;&nbsp;&nbsp;&nbsp;页</span>
            </el-menu-item>
            <el-menu-item index="2">
                <i class="el-icon-document"></i>
                <span slot="title">用户管理</span>
            </el-menu-item>
            <el-menu-item index="3">
                <i class="el-icon-setting"></i>
                <span slot="title">心理咨询</span>
            </el-menu-item>
        </el-menu>
        <section class="content">
            <el-table :data="tableData" stripe border>
                <el-table-column
                        prop="name"
                        label="名称">
                </el-table-column>
                <el-table-column
                        prop="email"
                        label="邮箱">
                </el-table-column>
                <el-table-column
                        prop="sex"
                        label="性别">
                    <template slot-scope="scope">
                        <el-tag
                                :type="sexColor(scope.row.sex)"
                                disable-transitions>[[ showSex(scope.row.sex) ]]
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="age"
                        label="年龄">
                </el-table-column>
                <el-table-column
                        prop="last_login"
                        label="上次登录">
                </el-table-column>
                <el-table-column
                        width="250"
                        label="操作">
                    <template slot-scope="scope">
                        <el-button @click="show_result(scope.row)" size="small" type="info" plain>查看</el-button>
                        <el-button @click="show_edit_form(scope.row)" size="small" type="primary" plain>编辑</el-button>
                        <el-button @click="del_user(scope.row)" size="small" type="danger" plain>删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </section>
        <transition name="el-fade-in-linear">
            <div v-show="edit_form.show" class="edit_form">
                <div class="box">
                    <h3>用户ID：[[ edit_form.id ]]</h3>
                    <el-form ref="form" :model="edit_form" label-width="40px">
                        <el-form-item label="名称">
                            <el-input v-model="edit_form.name"></el-input>
                        </el-form-item>
                        <el-form-item label="密码">
                            <el-input v-model="edit_form.pwd"></el-input>
                        </el-form-item>
                        <el-form-item label="邮箱">
                            <el-input v-model="edit_form.email"></el-input>
                        </el-form-item>
                        <el-form-item label="性别">
                            <el-radio-group v-model="edit_form.sex">
                                <el-radio :label="true">男</el-radio>
                                <el-radio :label="false">女</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="年龄">
                            <el-input-number v-model="edit_form.age" :min="1" :max="120"></el-input-number>
                        </el-form-item>
                        <el-form-item>
                            <div style="text-align: right">
                                <el-button type="primary" @click="alter_user">提交</el-button>
                                <el-button @click="edit_form.show = false">取消</el-button>
                            </div>
                        </el-form-item>
                    </el-form>
                    <el-button icon="el-icon-close" circle size="mini" @click.stop="edit_form.show = false"></el-button>
                </div>
            </div>
        </transition>
        <transition name="el-fade-in-linear">
            <div v-show="result.show" class="result" @click.stop="result.show = false">
                <div class="box" @click.stop.prevent>
                    <h3>用户ID：[[ result.user.id ]] 用户名：[[ result.user.name ]]
                        <el-select v-model="result.index" placeholder="请选择" @change="create_option" size="small"
                                   style="margin-left: 20px;">
                            <el-option
                                    v-for="(item,index) in result.user.data"
                                    :key="index"
                                    :label="item.title"
                                    :value="index">
                            </el-option>
                        </el-select>
                    </h3>
                    <div>
                        <div class="chart1" id="chart1"></div>
                        <div class="chart2" id="chart2"></div>
                    </div>
                    <el-button icon="el-icon-close" circle size="mini" @click.stop="result.show = false"></el-button>
                </div>
            </div>
        </transition>
    </main>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
<script>
    var vm = new Vue({
        delimiters: ['[[', ']]'],
        el: '#app',
        data: {
            edit_form: {
                show: false,
                id: 0,
                name: '',
                pwd: '',
                email: '',
                sex: null,
                age: 0
            },
            tableData: [],
            verdict: [],
            result: {
                show: false,
                user: {},
                index: 0,
                option1: {
                    tooltip: {},
                    radar: {
                        name: {
                            textStyle: {
                                color: '#fff',
                                backgroundColor: '#999',
                                borderRadius: 4,
                                padding: [5, 10],
                                fontSize: 16,
                            }
                        },
                        indicator: []
                    },
                    series: [{
                        name: '',
                        type: 'radar',
                        areaStyle: {},
                        data: [
                            {
                                value: [],
                                name: ''
                            }
                        ]
                    }]
                },
                option2: {
                    xAxis: {
                        type: 'value'
                    },
                    yAxis: {
                        type: 'category',
                        data: [],
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                        formatter: function (params) {
                            let htmlStr = ""
                            console.log(vm.verdict[params[0].dataIndex])
                            htmlStr += '<h3 style="line-height: 30px">' + vm.verdict[params[0].dataIndex].title + ' : <span style="font-size: 14px">' + params[0].data + '</span></h3>'
                            htmlStr += '<p style="width: 200px;white-space: normal">' + vm.verdict[params[0].dataIndex].trait + '</p>'
                            return htmlStr
                        }
                    },
                    series: [{
                        data: [],
                        type: 'bar',
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        }
                    }]
                },
            }
        },
        computed: {
            showSex() {
                return function (sex) {
                    if (sex === null) {
                        return '未设置'
                    } else if (sex) {
                        return '男'
                    } else {
                        return '女'
                    }
                }
            },
            sexColor() {
                return function (sex) {
                    if (sex === null) {
                        return 'info'
                    } else if (sex) {
                        return ''
                    } else {
                        return 'danger'
                    }
                }
            }
        },
        mounted: function () {
            {#获取医生用户#}
            axios.post('').then(res => {
                this.tableData = res.data.users
                console.log(res.data)
            })
            {#初始化图表#}
            this.myChart1 = echarts.init(document.getElementById('chart1'));
            this.myChart2 = echarts.init(document.getElementById('chart2'));
        },
        methods: {
            {#退出登录#}
            logout() {
                Cookies.remove('secret_key');
                window.location.href = '/cms'
            },
            {#显示用户信息编辑框#}
            show_edit_form(user) {
                this.edit_form = {
                    show: true,
                    id: user.id,
                    name: user.name,
                    pwd: user.pwd,
                    email: user.email,
                    sex: user.sex,
                    age: user.age
                }
            },
            {#删除用户#}
            del_user(user) {
                this.$confirm('此操作将永久删除该用户：“' + user.name + '”, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let params = new FormData()
                    params.append('action', 'del')
                    params.append('uid', user.id)
                    axios.post('', params).then(res => {
                        if (res.data.state) {
                            this.tableData = res.data.users
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        } else {
                            this.$message({
                                type: 'error',
                                message: '删除失败!'
                            });
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            {#修改用户信息#}
            alter_user() {
                if (this.edit_form.name && this.edit_form.pwd && this.edit_form.email) {
                    if (/^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/.test(this.edit_form.email)) {
                        let params = new FormData()
                        params.append('action', 'alter')
                        params.append('form', JSON.stringify(this.edit_form))
                        axios.post('', params).then(res => {
                            if (res.data.state) {
                                this.tableData = res.data.users
                                this.edit_form.show = false
                                this.$message({
                                    type: 'success',
                                    message: '修改成功!'
                                });
                            } else {
                                this.$message({
                                    type: 'error',
                                    message: '修改失败!'
                                });
                            }
                        })
                    } else {
                        this.$message({
                            type: 'error',
                            message: '邮箱格式有误!'
                        });
                    }
                } else {
                    this.$message({
                        type: 'warning',
                        message: '请填写完整!'
                    });
                }
            },
            {#显示用户测试结果#}
            show_result(user) {
                console.log(user)
                this.result.show = true
                this.result.user = user
                this.result.index = 0
                this.create_option(this.result.index)
            },
            {#处理用户数据#}
            create_option(index) {
                let result = this.result.user.data[index].result
                if (this.result.user.data[index].state) {
                    this.result.option1.series = result.radar.series
                    this.result.option1.radar = result.radar.radar
                    this.result.option2.yAxis = result.bar.yAxis
                    this.result.option2.series = result.bar.radar
                    this.verdict = result.bar.verdict
                    this.myChart1.setOption(this.result.option1, true);
                    this.myChart2.setOption(this.result.option2, true);
                } else {
                    this.myChart1.clear()
                    this.myChart2.clear()
                    this.$message({
                        type: 'warning',
                        message: '未测试，暂无数据!'
                    });
                }

            },
            {#跳转界面#}
            navto(index) {
                switch (index) {
                    case '1':
                        window.location.href = '/cms/index';
                        break;
                    case '2':
                        window.location.href = '/cms/user';
                        break;
                    case '3':
                        window.location.href = '/cms/advisory';
                        break;
                    default:
                        break
                }
            }
        }
    });
</script>
</body>
</html>
